<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单表单验证</title>
</head>
<body>
   <form action="#">
   		<table>
   				<tr>
   					<td>姓名：</td>
   					<td><input type="text" name="txtName" id="textName" placeholder="文本不能少于6个数字"></td>
   				</tr>
   				<tr>
   				  <td colspan="2">
   				  <input type="submit" value="提交">
   				  <input type="reset" value="重置">
   				  </td>
   				</tr>
   		</table>
   </form> 
   <script>
   			window.οnlοad=function(){
   			//先拿到我们的表单
   			var frm=document.forms[0];
   			//用户名的长度如果发生错误，我们要在该行内容后面给其加一个内容，提示用户填写错误，并把相应的错误内容框加红
   			var textNameMag=document.createElement('span');
   			textNameMag.innerHTML="姓名的长度必须在6到15个数字之间";
   			textNameMag.style.color="red";
//在表单进行提交时，必须要进行验证
frm.οnsubmit=function(e){
//获取文本框的内容
var txtContent=document.getElementById('textName');
//写一个正则表达式，你填入的数字必须在6到15之间
var txtContentRegExp=/\w{6,15}/gi;
if(txtContentRegExp.test(txtContent.value)){
//此处成功，删除我们错误的文本消息框
txtContent.parentNode.removeChild(textNameMag);
return true;
}else{
//检验失败，用户填入的文本不符合要求
txtContent.parentNode.appendChild(textNameMag);return false;
}
   			}
   			}
   </script>
</body>
</html>
